<template>
	<view class="body">
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">头像</view>
			<view class="m-f-ac">
				<image class="info-image" :src="userpic" mode="aspectFill" lazy-load @tap="changeImg"></image>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">昵称</view>
			<view class="m-f-ac">
				<input class="info-nickname" type="text" v-model="username" />
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">性别</view>
			<view class="m-f-ac" @tap="changeOne('sex')">
				<view>{{sexArr[sex]}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">生日</view>
			<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="m-f-ac">
					<view>{{birthday}}</view>
					<view class="icon iconfont icon-bianji"></view>
				</view>
			</picker>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">情感</view>
			<view class="m-f-ac" @tap="changeOne('qg')">
				<view>{{qgArr[qg]}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">职业</view>
			<view class="m-f-ac" @tap="changeOne('job')">
				<view>{{job}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list m-f-ac m-f-jsb">
			<view class="info-name">家乡</view>
			<view class="m-f-ac" @tap="showMulLinkageThreePicker">
				<view>{{pickerText}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<button type="default" class="user-set-btn" @tap="submit">完成</button>
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import Time from '../../common/time.js'
	let sexArr = ['不限', '男', '女']
	let qgArr = ['秘密', '未婚', '已婚']
	let jobArr = ['秘密', 'IT', '老师']
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				sexArr: sexArr,
				qgArr: qgArr,
				userpic: '',
				username: '',
				sex: 0,
				qg: 0,
				job: '',
				birthday: '',
				pickerText: '',
			}
		},
    computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
    },
		onLoad() {
			this.userpic = this.User.userinfo.userpic
			this.username = this.User.userinfo.username
			this.sex = this.User.userinfo.sex || 0
			this.qg = this.User.userinfo.qg || 0
			this.job = this.User.userinfo.job || '请填写'
			this.birthday = this.User.userinfo.birthday || '请填写'
			this.pickerText = this.User.userinfo.pickerText || '请填写'
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
				return true
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		methods: {
			showMulLinkageThreePicker() { // 三级联动选择
				this.$refs.mpvueCityPicker.show()
			},
			bindDateChange(e) { // 修改生日
				this.birthday = e.target.value
			},
			onConfirm(e) {
				this.pickerText = e.label
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async changeImg(){
				let [err,res] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (!res) return;
				// 上传
				uni.showLoading({ title: '上传中...', mask: false });
				let [err2,res2] = await this.$http.upload('/edituserpic',{
					name: 'userpic',
					filePath: res.tempFilePaths[0],
					token: true,
					checkToken: true
				});
				// 请求失败
				let data = JSON.parse(res2.data)
				// 上传失败
				if (err2 || data.errorCode) {
					uni.showToast({ title: data.msg ? data.msg : '上传失败', icon:"none" })
					uni.hideLoading()
					return false
				}
				// 成功
				uni.hideLoading()
				uni.showToast({ title: '修改头像成功!' })
				this.userpic = data.data
				// 修改状态，存储
				this.User.userinfo.userpic = this.userpic
				uni.setStorageSync("userinfo",this.User.userinfo)
			},
			changeOne(val) { // 单列选择
				let arr = []
				switch (val) {
					case 'sex':
						arr = sexArr
						break
					case 'qg':
						arr = qgArr
						break
					case 'job':
						arr = jobArr
						break
				}
				uni.showActionSheet({
					itemList: arr,
					success: (res) => {
						switch (val) {
							case 'sex':
								this.sex = res.tapIndex
								break
							case 'qg':
								this.qg = res.tapIndex
								break
							case 'job':
								this.job = arr[res.tapIndex]
								break
						}
					}
				})
			},
			async submit() { // 完成
				console.log('000')
				let data = {
					name: this.username,
					sex: this.sex,
					qg: this.qg,
					job: this.job,
					birthday: this.birthday,
					path: this.pickerText,
					age: Time.gettime.getAgeByBirthday(this.birthday)
				}
				let [err,res] = await this.$http.post('/edituserinfo',JSON.stringify(data),{
					token:true,
					checkToken:true
				})
				console.log('11111')
				// 请求失败处理
				if (!this.$http.errorCheck(err,res)) return
				// 成功
				uni.showToast({ title: '修改成功！' })
				console.log('2222')
				// 修改状态，缓存
				this.User.userinfo.username = this.username
				this.User.userinfo.userinfo = data
				uni.setStorageSync('userinfo',this.User.userinfo)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import  '../../common/form.css';
	.user-set-userinfo-list {
		padding: 20rpx;
		border-bottom : 1rpx solid #f4f4f4;
		.info-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #9b9b9b;
		}
		.info-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}
		.icon-bianji {
			margin-left: 20rpx;
			color: #9b9b9b;
		}
		.info-nickname {
			text-align: right;
		}
	}
</style>
